<template>
  <div class="attachment-resume-container">
    <navigation-bar />
    <div class="upload-section">
      <h2>上传简历</h2>
      <input ref="fileInput" type="file" @change="handleFileUpload" accept=".pdf,.doc,.docx" />

      <!-- 文件未上传时 -->
      <div v-if="!uploadedFileName">
        <button @click="handleFileUploadClick" class="upload-button">
          上传简历
        </button>
      </div>

      <!-- 文件已上传时 -->
      <div v-else class="file-info">
        <p>已上传文件: {{ uploadedFileName }}</p>
        <p>上传时间: {{ uploadedTime }}</p>
        <img v-if="isImage" :src="imageUrl" :alt="uploadedFileName" class="uploaded-image" />
        <img v-else-if="fileIconUrl" :src="fileIconUrl" :alt="uploadedFileName" class="file-icon" />
        <div class="action-buttons">
          <button @click="updateResume" class="action-button">更新</button>
          <button @click="renameResume" class="action-button">修改名字</button>

        <button @click="downloadResume" class="download-button">
          下载简历
        </button>
    </div>
  </div>
    </div>
  </div>

</template>

<script setup>
import { ref, computed } from 'vue';
import NavigationBar from '@/components/NavigationBar.vue';

const uploadedFile = ref(null);
const uploadedFileName = ref('');
const uploadedTime = ref('');
const fileInput = ref(null);
const imageUrl = ref('');
const fileIconUrl = ref('');
const newFileName = ref('');

const isImage = computed(() => {
  if (uploadedFile.value) {
    const fileType = uploadedFile.value.type;
    return fileType.startsWith('image/');
  }
  return false;
});

const getFileIconUrl = (fileName) => {
  const extension = fileName.split('.').pop().toLowerCase();
  console.log('名字:'+extension)
  switch (extension) {
    case 'pdf':
      return '../pdfLogo.png';
    case 'doc':
    case 'docx':
      return '../docLogo.png';
    default:
      return '';
  }
};

const handleFileUpload = (event) => {
  const file = event.target.files[0];
  if (file) {
    uploadedFile.value = file;
    uploadedFileName.value = file.name;
    uploadedTime.value = new Date().toLocaleString(); // 设置上传时间为当前时间
    if (isImage.value) {
      imageUrl.value = URL.createObjectURL(file);
      fileIconUrl.value = '';
    } else {
      imageUrl.value = '';
      fileIconUrl.value = getFileIconUrl(file.name);
    }
  }
};

const handleFileUploadClick = () => {
  if (fileInput.value) {
    fileInput.value.click();
  } else {
    console.error('File input element not found');
  }
};

const downloadResume = () => {
  if (uploadedFile.value) {
    const url = URL.createObjectURL(uploadedFile.value);
    const a = document.createElement('a');
    a.href = url;
    a.download = uploadedFileName.value;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }
};

const updateResume = () => {
  // 更新逻辑：重新选择文件并上传
  handleFileUploadClick();
};



const renameResume = () => {
  // 修改名字逻辑：提示用户输入新文件名
  const newName = prompt('请输入新的文件名:');
  if (newName && newName.trim() !== '') {
    newFileName.value = newName.trim();
    uploadedFileName.value = `${newFileName.value}.${uploadedFile.value.name.split('.').pop()}`;
  }
};
</script>

<style scoped>
.attachment-resume-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.upload-section {
  text-align: center;
}

.file-info {
  margin-top: 10px;
  text-align: left;
}

.uploaded-image {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
}

.file-icon {
  width: 64px;
  height: 64px;
  margin-top: 10px;
}

.action-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  gap: 10px; /* 调整按钮之间的间距 */
}

.action-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #409eff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #66b1ff;
}

.action-button:active {
  background-color: #337ab7;
}

.download-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #409eff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;

}

.download-button:hover {
  background-color: #66b1ff;
}

.download-button:active {
  background-color: #337ab7;
}

.download-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.upload-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #409eff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.upload-button:hover {
  background-color: #66b1ff;
}

.upload-button:active {
  background-color: #337ab7;
}

input[type="file"] {
  display: none;
}
</style>
